<template>
  <div class="toolbar">
    <div class="box">
      <div
        :class="[
          'item',
          {
            'active-item': activeToorbar && activeToorbar.icon === toolbar.icon,
          },
        ]"
        v-for="(toolbar, index) in toolbarList"
        :key="index"
        @click="clickToorbar(toolbar)"
      >
        <div
          :class="[
            'img-box',
            { active: activeToorbar && activeToorbar.icon === toolbar.icon },
          ]"
        >
          <!-- <img
            :src="require(`@/assets/home/bottom/toolbar/${toolbar.icon}.png`)"
          /> -->
          <div class="img-title">{{ toolbar.text }}</div>
        </div>
        <div
          ref="children"
          :class="[
            'children',
            {
              'active-children':
                activeToorbar && activeToorbar.icon === toolbar.icon,
            },
          ]"
          :style="`width: ${toolbar.width}`"
        >
          <div
            :class="['child']"
            v-for="(child, index) in toolbar.children"
            :key="index"
            @click.stop="clickChild(child)"
          >
            <div
              :class="[
                'child-box',
                {
                  'active-child':
                    activeChild &&
                    activeChild.icon === child.icon &&
                    child.canActive,
                },
              ]"
            >
              <!-- <img
                :src="require(`@/assets/home/bottom/toolbar/${child.icon}.png`)"
                alt=""
              /> -->
              <span style="margin-left: 4px">{{ child.text }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js"; // 三维景区倾斜摄影
import {
  getAddressAll,
  getAllBuilding,
  getDeliveryAll,
  getScenicSpotAll,
} from "@/api/home.js";
import PointTogetherGraph from "../../../utils/pointTogether";
import PolygonTogetherGraph from "../../../utils/polygonTogether";
import axios from "axios";
import * as turf from "@turf/turf";

let realistic3DTileset = null;
let areaNameSpaceSpreadDatasource = null;
let houseSpaceSpreadDatasource = null;
let scenicSpotsDataSource = null;
let fastThingSpreadDataSource = null;
export default {
  data() {
    return {
      toolbarList: [
        {
          text: "地名管理",
          icon: "1",
          methods: "",
          data: {},
          children: [
            {
              text: "地名空间分布",
              icon: "1-1",
              methods: "areaNameSpaceSpread",
              data: "地名空间分布",
            },
            {
              text: "地名空间查询",
              icon: "1-2",
              methods: "areaNameSpaceSearch",
              data: {
                panelTitle: "地名空间查询",
                panelId: "areaNameSpaceSearchId",
              },
            },
            {
              text: "地名属性查询",
              icon: "1-3",
              methods: "areaNamePropertySearch",
              data: {
                panelTitle: "地名属性查询",
                panelId: "areaNamePropertySearchId",
              },
            },
          ],
        },
        {
          text: "门牌管理",
          icon: "4",
          methods: "",
          data: {},
          children: [
            {
              text: "房屋空间分布",
              icon: "4-1",
              methods: "houseSpaceSpread",
              data: "房屋空间分布",
            },
            {
              text: "门牌空间查询",
              icon: "4-2",
              methods: "houseNumSpaceSearch",
              data: {
                panelTitle: "门牌空间查询",
                panelId: "houseNumSpaceSearchId",
              },
            },
            {
              text: "门牌属性查询",
              icon: "4-3",
              methods: "houseNumPropertySearch",
              data: {
                panelTitle: "门牌属性查询",
                panelId: "houseNumPropertySearchId",
              },
            },
            {
              text: "门牌批量编号",
              icon: "4-3",
              methods: "houseNumBatchNum",
              data: {
                panelTitle: "门牌批量编号",
                panelId: "houseNumBatchNumId",
              },
            },
          ],
        },
        {
          text: "三维旅游专题",
          icon: "3",
          methods: "closeRealistic3D",
          data: {},
          children: [
            {
              text: "实景三维",
              icon: "3-3",
              methods: "realistic3D",
              data: {},
            },
            {
              text: "景点分布",
              icon: "3-4",
              methods: "scenicSpots",
              data: {},
            },
            {
              text: "景点查询",
              icon: "3-1",
              methods: "scenicSearch",
              data: {
                panelTitle: "景点查询",
                panelId: "scenicSearchId",
              },
            },
          ],
        },
        {
          text: "快递点专题",
          icon: "5",
          methods: "",
          data: "",
          children: [
            {
              text: "快递点分布",
              icon: "5-3",
              methods: "fastThingSpread",
              data: {},
            },
            {
              text: "空间查询",
              icon: "5-1",
              methods: "fastSpaceSearch",
              data: {
                panelTitle: "快递点空间查询",
                panelId: "fastSpaceSearchId",
              },
            },
            {
              text: "属性查询",
              icon: "5-2",
              methods: "fastPropertySearch",
              data: {
                panelTitle: "快递点属性查询",
                panelId: "fastPropertySearchId",
              },
            },

            {
              text: "路径规划",
              icon: "5-4",
              methods: "fastRoadPlan",
              data: {
                panelTitle: "路径规划",
                panelId: "routePlanId",
              },
            },
          ],
        },
        {
          text: "统计分析",
          icon: "2",
          methods: "",
          data: "",
          children: [
            {
              text: "数据量统计",
              icon: "2",
              methods: "countAnalyse",
              data: {
                panelTitle: "数据量统计",
                panelId: "countAnalyseId",
              },
            },
          ],
        },
      ],
      activeToorbar: {
        icon: "",
      },
      activeChild: {
        showClock: false,
        time: 0,
      },
      showArr: false,
      // 快递空间数据
      fastData: [],
    };
  },
  methods: {
    clickToorbar(toolbar) {
      if (this.activeChild) {
        this.activeChild.showClock = false;
        this.activeChild.time = 0;
      }
      this.activeChild = null;
      if (this.activeToorbar && toolbar.icon === this.activeToorbar.icon) {
        // 点击已激活的 收起来

        if (toolbar?.methods) {
          // 点击父节点取消点聚图
          this.closeDatasource();
          this[toolbar.methods](toolbar.data);
        }
        this.activeToorbar = null;
      } else {
        // 点击未激活的去激活
        // this.activeToorbar = toolbar;
        this.$set(this, "activeToorbar", toolbar);
      }
      const prevPositions = this.getRects(this.$refs.children);
      this.toolbarList.forEach((e) => {
        e.width = 0;
      });
      if (this.activeToorbar) {
        toolbar.width = "auto";
      }
      this.$nextTick(() => {
        const currentPositions = this.getRects(this.$refs.children);
        const childrenElement = this.$refs.children;
        childrenElement.forEach((e, index) => {
          const keyframes = [
            { width: `${prevPositions[index].width}px` },
            { width: `${currentPositions[index].width}px` },
          ];
          const options = {
            duration: 300,
            easing: "cubic-bezier(0,0,0.32,1)",
          };
          e.animate(keyframes, options);
        });
      });
    },
    getRects(doms) {
      return doms.map((dom) => {
        const rect = dom.getBoundingClientRect();
        const { width } = rect;
        return { width };
      });
    },
    clickChild(child) {
      if (this.activeChild) {
        this.activeChild.showClock = false;
        this.activeChild.time = 0;
      }
      // this.activeChild = child;
      this.$set(this, "activeChild", child);
      if (this.activeChild.type === "time") {
        this.activeChild.showClock = true;
      }
      if (child.methods) {
        // 点击除空间分布其他的按钮，去清空空间分布的加载
        this.closeDatasource();
        this[child.methods](child.data);
      }
    },
    setActivePanel(item) {
      this.$store.commit("setActivePanel", {
        panelId: item.panelId,
        panelTitle: item.panelTitle,
      });
    },
    // 关闭面板
    closeActivePanel() {
      this.setActivePanel({
        panelId: "",
      });
    },
    // 关闭数据加载
    closeDatasource() {
      // 地名点聚合数据
      if (areaNameSpaceSpreadDatasource) {
        areaNameSpaceSpreadDatasource.entities.removeAll();
        cesiumViewer.dataSources.remove(areaNameSpaceSpreadDatasource);
        areaNameSpaceSpreadDatasource = null;
      }
      // 房屋空间分布
      if (houseSpaceSpreadDatasource) {
        houseSpaceSpreadDatasource.entities.removeAll();
        cesiumViewer.dataSources.remove(houseSpaceSpreadDatasource);
        houseSpaceSpreadDatasource = null;
      }
      // 景点分布
      if (scenicSpotsDataSource) {
        scenicSpotsDataSource.entities.removeAll();
        cesiumViewer.dataSources.remove(scenicSpotsDataSource);
        scenicSpotsDataSource = null;
      }
      // 快递点分布
      if (fastThingSpreadDataSource) {
        fastThingSpreadDataSource.entities.removeAll();
        cesiumViewer.dataSources.remove(fastThingSpreadDataSource);
        fastThingSpreadDataSource = null;
      }
    },

    // 地名空间分布
    async areaNameSpaceSpread() {
      this.closeActivePanel();
      const position = Cesium.Cartesian3.fromDegrees(
        112.70367390186627,
        32.3721423259196,
        2181916.890210475
      );
      cesiumViewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
          heading: 0.02087892128661739, // 水平旋转  -正北方向
          pitch: -1.5615183900257081, // 上下旋转  --俯视朝向
          roll: 0, // 视口翻滚角度
        },
      });

      const res = await getAddressAll();
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        // info.map(item => {
        //   const properties = item;
        //   const feature = {
        //     "type": "Feature",
        //     "properties": item,
        //     "geometry": {
        //       "type": "Point",
        //       "coordinates": [Number(item.DongJing)/10000,Number(item.BeiWei)/10000]
        //     }
        //   }
        //   features.push(feature);
        // })
        // const featureCollection = {
        //   "type": "FeatureCollection",
        //   "features": features
        // };
        const features = [];
        info.map((item) => {
          const feature = {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [
                Number(item.DongJing) / 10000,
                Number(item.BeiWei) / 10000,
              ],
            },
            properties: item,
          };
          features.push(feature);
        });
        // this.addPrimitives(features);
        // 加载点聚图
        // 地名空间数据
        const geoJson = {
          type: "FeatureCollection",
          features,
        };
        if (!geoJson) return;
        // areaNameSpaceSpreadDatasource =
        Cesium.GeoJsonDataSource.load(geoJson, {
          camera: cesiumViewer.scene.camera,
          canvas: cesiumViewer.scene.canvas,
        }).then((ds) => {
          areaNameSpaceSpreadDatasource = ds;
          new PointTogetherGraph(cesiumViewer, areaNameSpaceSpreadDatasource, {
            singlePointbaseImage: "/gisdata/images/address/juhedian-lan.png",
            clusterImages: [
              "/gisdata/images/address/juhedian-hong.png",
              "/gisdata/images/address/juhedian-huang.png",
              "/gisdata/images/address/juhedian-lv.png",
              "/gisdata/images/address/juhedian-zi.png",
            ],
          });
        });
      }

      // ---------------------------------
      // const res = await axios.get("mockData/address.geojson");
      // let geoJson = res.data;
      // areaNameSpaceSpreadDatasource = Cesium.GeoJsonDataSource.load(geoJson, {
      //   camera: cesiumViewer.scene.camera,
      //   canvas: cesiumViewer.scene.canvas,
      // });
      // new PointTogetherGraph(cesiumViewer, areaNameSpaceSpreadDatasource, {
      //   singlePointbaseImage: "/gisdata/images/address/juhedian-hong.png",
      //   clusterImages: [
      //     "/gisdata/images/address/juhedian-huang.png",
      //     "/gisdata/images/address/juhedian-lan.png",
      //     "/gisdata/images/address/juhedian-lv.png",
      //     "/gisdata/images/address/juhedian-zi.png",
      //   ],
      // });
    },

    // 地名空间查询
    areaNameSpaceSearch(item) {
      this.setActivePanel(item);
    },
    // 地名属性查询
    areaNamePropertySearch(item) {
      this.setActivePanel(item);
    },
    // 房屋空间分布
    async houseSpaceSpread() {
      this.closeActivePanel();
      // const position = Cesium.Cartesian3.fromDegrees(
      //   112.70367390186627,
      //   32.3721423259196,
      //   2181916.890210475
      // );
      const position = new Cesium.Cartesian3(-2230968.674222539, 5161578.001907659, 3148118.344935142);
      cesiumViewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
          heading: 0.020878898442044047, // 0.02087892128661739, // 水平旋转  -正北方向
          pitch: -1.5616370579276952, // -1.5615183900257081, // 上下旋转  --俯视朝向
          roll: 0, // 视口翻滚角度
        },
      });

      const res = await getAllBuilding();
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        const features = [];
        info.map((item) => {
          const pts = [];
          const ptsArray = item.positions.split(",");
          for (let i = 0; i < ptsArray.length; i += 2) {
            const pt = turf.point([
              Number(ptsArray[i]),
              Number(ptsArray[i + 1]),
            ]);
            pts.push(pt);
          }
          const center = turf.center(turf.featureCollection(pts));
          // const feature = {
          //   type: 'Feature',
          //   geometry: {
          //     type: 'Point',
          //     coordinates: [center.x,center.y]
          //   },
          //   properties: Object.assign(item,{positions:item.positions})
          // }
          center.properties = item;
          features.push(center);
        });
        // 加载点聚图
        // 房屋空间数据
        const geoJson = {
          type: "FeatureCollection",
          features,
        };
        if (!geoJson) return;
        // houseSpaceSpreadDatasource =
        Cesium.GeoJsonDataSource.load(geoJson, {
          camera: cesiumViewer.scene.camera,
          canvas: cesiumViewer.scene.canvas,
        }).then((ds) => {
          houseSpaceSpreadDatasource = ds;
          new PolygonTogetherGraph(cesiumViewer, houseSpaceSpreadDatasource, {
            singlePointbaseImage: "/gisdata/images/address/juhedian-hong.png",
            clusterImages: [
              "/gisdata/images/address/juhedian-huang.png",
              "/gisdata/images/address/juhedian-lan.png",
              "/gisdata/images/address/juhedian-lv.png",
              "/gisdata/images/address/juhedian-zi.png",
            ],
          });
        });
      }
    },
    // 门牌空间查询
    houseNumSpaceSearch(item) {
      this.setActivePanel(item);
    },
    // 门牌属性查询
    houseNumPropertySearch(item) {
      this.setActivePanel(item);
    },
    // 门牌批量编号
    houseNumBatchNum(item) {
      this.setActivePanel(item);
    },
    // 实景三维
    async realistic3D() {
      this.closeActivePanel();
      if (!realistic3DTileset) {
        // 加载地形
        const terrainProvider = new Cesium.CesiumTerrainProvider({
          url: "http://localhost/terrain/hnterrain",
          requestWaterMask: true, // 开启法向量
          requestVertexNormals: true, // 开启水面特效
        });
        cesiumViewer.terrainProvider = terrainProvider;

        // 加载倾斜模型
        const tileset = await new Cesium.Cesium3DTileset({
          // 不设置此属性，则报错：Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'
          skipLevelOfDetail: true,
          baseScreenSpaceError: 1024,
          maximumScreenSpaceError: 64, // 数值加大，能让最终成像变模糊
          skipScreenSpaceErrorFactor: 16,
          skipLevels: 1,
          immediatelyLoadDesiredLevelOfDetail: false,
          loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
          cullWithChildrenBounds: true,
          cullRequestsWhileMoving: true,
          cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
          preloadWhenHidden: true,
          preferLeaves: true,
          maximumMemoryUsage: 512, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
          progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
          // dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
          dynamicScreenSpaceErrorDensity: 1, // 数值加大，能让周边加载变快
          dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没，反正放着吧先
          dynamicScreenSpaceError: true, // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋

          url: "http://localhost/lx_3dtiles/tileset.json",
        });
        realistic3DTileset = cesiumViewer.scene.primitives.add(tileset);
        cesiumViewer.zoomTo(tileset);

        console.log("load tileset");

        // 设置高度
        const heightOffset = 35.0;
        // 计算tileset的绑定范围
        // var boundingSphere = tileset.boundingSphere; // 这里获取boudingSphere 报错
        // boundingSphere.center
        const center = new Cesium.Cartesian3(
          -2230147.5559982387,
          5096904.999345761,
          3109011.3747959184
        );
        // 计算中心点位置
        const cartographic = Cesium.Cartographic.fromCartesian(center);
        // 计算中心点位置的地表坐标
        const surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          0.0
        );
        // 偏移后的坐标
        const offset = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          heightOffset
        );
        const translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      } else {
        realistic3DTileset.show = true;
      }
    },
    // 关闭实景三维
    closeRealistic3D() {
      if (realistic3DTileset) {
        realistic3DTileset.show = false;
      }
    },
    // 景点查询
    scenicSearch(item) {
      this.setActivePanel(item);
    },
    // 景点分布
    async scenicSpots() {
      this.closeActivePanel();
      const position = Cesium.Cartesian3.fromDegrees(
        112.70367390186627,
        32.3721423259196,
        2181916.890210475
      );
      cesiumViewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
          heading: 0.02087892128661739, // 水平旋转  -正北方向
          pitch: -1.5615183900257081, // 上下旋转  --俯视朝向
          roll: 0, // 视口翻滚角度
        },
      });

      const res = await getScenicSpotAll();
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        const features = [];
        info.map((item) => {
          const feature = {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [
                Number(item.position.split(",")[0]),
                Number(item.position.split(",")[1]),
              ],
            },
            properties: item,
          };
          features.push(feature);
        });
        // 空间数据
        const geoJson = {
          type: "FeatureCollection",
          features,
        };
        if (!geoJson) return;
        // 加载点聚图
        // scenicSpotsDataSource =
        Cesium.GeoJsonDataSource.load(geoJson, {
          camera: cesiumViewer.scene.camera,
          canvas: cesiumViewer.scene.canvas,
        }).then((ds) => {
          scenicSpotsDataSource = ds;
          new PointTogetherGraph(cesiumViewer, scenicSpotsDataSource, {
            singlePointbaseImage:
              "/gisdata/images/scenicspot/scenicspot-lan.png",
            clusterImages: [
              "/gisdata/images/scenicspot/scenicspot-huang.png",
              "/gisdata/images/scenicspot/scenicspot-lv.png",
              "/gisdata/images/scenicspot/scenicspot-zi.png",
              "/gisdata/images/scenicspot/scenicspot-hong.png",
            ],
          });
        });
      }
    },
    // 快递点分布
    async fastThingSpread() {
      this.closeActivePanel();

      const position = Cesium.Cartesian3.fromDegrees(
        112.70367390186627,
        32.3721423259196,
        2181916.890210475
      );
      cesiumViewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
          heading: 0.02087892128661739, // 水平旋转  -正北方向
          pitch: -1.5615183900257081, // 上下旋转  --俯视朝向
          roll: 0, // 视口翻滚角度
        },
      });

      const res = await getDeliveryAll();
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        const features = [];
        info.map((item) => {
          const feature = {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [
                Number(item.position.split(",")[0]),
                Number(item.position.split(",")[1]),
              ],
            },
            properties: item,
          };
          features.push(feature);
        });
        // 空间数据
        const geoJson = {
          type: "FeatureCollection",
          features,
        };
        if (!geoJson) return;
        // 加载点聚图    快递点空间分布
        // fastThingSpreadDataSource =
        Cesium.GeoJsonDataSource.load(geoJson, {
          camera: cesiumViewer.scene.camera,
          canvas: cesiumViewer.scene.canvas,
        }).then((ds) => {
          fastThingSpreadDataSource = ds;
          new PointTogetherGraph(cesiumViewer, fastThingSpreadDataSource, {
            singlePointbaseImage: "/gisdata/images/delivery/delivery-lan.png",
            clusterImages: [
              "/gisdata/images/delivery/delivery-huang.png",
              "/gisdata/images/delivery/delivery-lv.png",
              "/gisdata/images/delivery/delivery-zi.png",
              "/gisdata/images/delivery/delivery-hong.png",
            ],
          });
        });
      }
      // 加载快递点分布
      // this.loadFastSpreadData();
    },
    async loadFastSpreadData() {
      this.fastData = await request.get("gisdata/fastData.json");
      const entities = [];
      this.fastData.forEach((item) => {
        const entity = this.billboardBounce(item);
        entities.push(entity);
      });
      cesiumViewer.flyTo(entities);
    },
    // 跳动的广告牌
    billboardBounce(item, bounceHeight = 5) {
      const degreeAndHeight = this.cartesianToDegree(item.position);
      let addHeight = 0;
      let flog = true;
      return cesiumViewer.entities.add({
        id: "fast" + item.id,
        meta: item,
        position: new Cesium.CallbackProperty(() => {
          if (flog) {
            addHeight = addHeight - 0.25;
            if (addHeight < 0) {
              flog = false;
            }
          } else {
            addHeight = addHeight + 0.2;
            if (addHeight > bounceHeight) {
              flog = true;
            }
          }
          return Cesium.Cartesian3.fromDegrees(
            degreeAndHeight[0],
            degreeAndHeight[1],
            degreeAndHeight[2] + addHeight
          );
        }, false), // Cesium.Cartesian3.fromDegrees(116.2, 39.53, 4),
        billboard: {
          image: "gisdata/images/marker.png",
          sizeInMeters: true,
          scale: 0.1,
          show: true,
          width: 100,
          height: 100,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            6.8e10
          ),
        },
        label: {
          text: "快递点" + item.id,
          scale: 0.7,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            6.8e10
          ),
          pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置
        },
      });
    },
    // 笛卡尔转经纬度
    cartesianToDegree(cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
      const latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
      const heightString = cartographic.height;
      return [longitudeString, latitudeString, heightString];
    },
    // 空间查询
    fastSpaceSearch(item) {
      this.setActivePanel(item);
    },
    // 属性查询
    fastPropertySearch(item) {
      this.setActivePanel(item);
    },
    // 路径规划
    fastRoadPlan(item) {
      this.setActivePanel(item);
    },
    // 统计分析
    countAnalyse(item) {
      this.setActivePanel(item);
    },

    async addScenicSpots() {
      const id = "sceneic-spots";
      const bounceHeight = 5;
      const scenespot = await request.get("gisdata/SceneSpot.json");
      scenespot.forEach((item) => {
        const degreeAndHeight = this.cartesianToDegree(item.position);
        degreeAndHeight.height += 10;
        let addHeight = 0;
        let flog = true;
        cesiumViewer.entities.add({
          id: "scenespot" + item.id,
          meta: item,
          position: new Cesium.CallbackProperty(() => {
            if (flog) {
              addHeight = addHeight - 0.25;
              if (addHeight < 0) {
                flog = false;
              }
            } else {
              addHeight = addHeight + 0.2;
              if (addHeight > bounceHeight) {
                flog = true;
              }
            }
            return Cesium.Cartesian3.fromDegrees(
              degreeAndHeight[0],
              degreeAndHeight[1],
              degreeAndHeight[2] + addHeight
            );
          }, false), // Cesium.Cartesian3.fromDegrees(116.2, 39.53, 4),
          billboard: {
            image: "gisdata/images/marker.png",
            sizeInMeters: true,
            scale: 0.1,
            show: true,
            width: 100,
            height: 100,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              6.8e10
            ),
          },
          label: {
            text: "景点" + item.id,
            scale: 0.7,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              6.8e10
            ),
            pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置
          },
        });
      });
    },

    // 添加图标点
    addPrimitives(features) {
      //  生成PointPrimitiveCollection对象
      // var pointCollection = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
      const billboards = viewer.scene.primitives.add(
        new Cesium.BillboardCollection()
      );

      let feature, coordinates, position;
      for (let i = 0; i < features.length; i++) {
        feature = features[i];
        coordinates = feature.coordinates;
        position = Cesium.Cartesian3.fromDegrees(
          coordinates[0],
          coordinates[1],
          0
        );
        // pointCollection.add({
        //     position : Cesium.Cartesian3.fromDegrees(longitude, latitude),
        //     color : color
        // });
        billboards.add({
          id: point.id,
          width: 40,
          height: 31,
          position: position,
          image: "/src/assets/img/car.png",
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // data: { community, gridsMini, housingEstate, lat, lng, structure },
        });
      }
    },

    // 添加单个图标点
    addPrimitive(position) {
      this.billboards.add({
        position: position,
        image: "../static/images/monitor.png",
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      });
    },
  },
};
</script>

<style scoped lang="less">
.toolbar {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  .box {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    .item {
      margin: 0 6px -10px;
      display: flex;
      align-items: center;
      transition: all ease 0.3s;
      cursor: pointer;
      .img-box {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        background: #1a73e8;
        // background: #399cff;
        border: 1px solid #54a0ed;
        padding: 5px 10px;
        backdrop-filter: blur(2px);
        img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
        .img-title {
          cursor: pointer;
          padding: 5px;
          white-space: nowrap;
        }
      }
      .active {
        background: linear-gradient(
          90deg,
          #2192b8 0%,
          rgba(33, 146, 184, 0.5) 50%,
          #2192b8 100%
        );
      }
      .children {
        width: 0;
        height: 32px;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-radius: 0px 4px 4px 0px;
        background-color: rgba(8, 39, 55, 0.7);
        .child {
          height: 100%;
          display: flex;
          align-items: center;
          color: #fff;
          overflow: hidden;
          white-space: nowrap;

          .child-box {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 8px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 100;
            &:hover {
              background: linear-gradient(
                90deg,
                #2192b8 0%,
                rgba(33, 146, 184, 0.5) 50%,
                #2192b8 100%
              );
            }
          }
          .active-child {
            background: linear-gradient(
              90deg,
              #2192b8 0%,
              rgba(33, 146, 184, 0.5) 50%,
              #2192b8 100%
            );
          }
        }
      }
      .active-children {
        border: 1px solid rgba(95, 191, 255, 0.6);
        padding: 0 8px;
      }
    }
    // .active-item {
    //   // transform: translateY(-6px);
    // }
  }
}
</style>
